<template>
	<div class="ui-mode-container ui-mode-box flex-col">
        <!-- 头部 -->
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @click="handleHistory" @touchstart.stop>
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">商品评价</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <!-- 表单内容 -->
        <div class="mt-tab-item flex-row align-between-row">
            <a href="javascript:;" class="flex-row align-center" :class="{active:i==index,star:i!=0}" @click="handleChangeTab(i)" :key="i" v-for="(item,i) in menu">
                {{item.title}}<i v-if="i!=0" class="iconfont icon iconstar-solid"></i>
            </a>
        </div>
        <div class="ui-mode-content flex1 flex-col">
            <div class="mt-tab-content relative flex1">
                <div class="ui-mode-box" :style="{display:index==0?'block':'none'}">
                    <inner-all v-if="menu[0].flag"></inner-all>
                </div>
                <div class="ui-mode-box" :style="{display:index==1?'block':'none'}">
                    <inner-all v-if="menu[1].flag"></inner-all>
                </div>
                <div class="ui-mode-box" :style="{display:index==2?'block':'none'}">
                    <inner-all v-if="menu[2].flag"></inner-all>
                </div>
                <div class="ui-mode-box" :style="{display:index==3?'block':'none'}">
                    <inner-all v-if="menu[3].flag"></inner-all>
                </div>
                <div class="ui-mode-box" :style="{display:index==4?'block':'none'}">
                    <inner-all v-if="menu[4].flag"></inner-all>
                </div>
                <div class="ui-mode-box" :style="{display:index==5?'block':'none'}">
                    <inner-all v-if="menu[5].flag"></inner-all>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import innerAll from './list';
export default {
    name: 'category/evaluate',
    data() {
        return {
            public_agent_info:{},
            public_user_info:{},
            index:null,
            menu:[
                {
                    flag:false,
                    title:'全部'
                },
                {
                    flag:false,
                    title:'5'
                },
                {
                    flag:false,
                    title:'4'
                },
                {
                    flag:false,
                    title:'3'
                },
                {
                    flag:false,
                    title:'2'
                },
                {
                    flag:false,
                    title:'1'
                }
            ]
        }
    },
    mixins:[
        mixinCommon,
        mixinRequest
    ],
    components:{
        innerAll
    },
    computed:{
        getIndex(){
            return this.$route.query.index||0;
        }
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init); 
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.showLoading();
            this.handleChangeTab(this.getIndex);
        },
        // tab切换
        handleChangeTab(i){
            if(i!=this.index){
                this.index=i;
                if(!this.menu[this.index].flag){
                    this.menu[this.index].flag=!this.menu[this.index].flag;
                };
                this.goRedirect();
            };
        },
        // 跳转redirect
        goRedirect(){
            if(!(this.$route.query.index&&this.$route.query.index==this.index)){
                this.$router.replace({
                    path:'/category/evaluate',
                    query:{
                        id:this.$route.query.id,
                        index:this.index
                    }
                });
            };
        }
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.ui-mode-container{
    background:#fff;
    .mt-tab-item{
        position:relative;
        margin:0 .85rem;
        padding:.85rem 0;
        a{
            display:block ;
            width:15%;
            height:1.5rem;
            border:1px solid #bababa;
            border-radius:0.2rem;
            font-size:0.64rem;
            line-height:1.5rem;
            text-align:center;
            color:#bababa;
            .iconfont{
                margin-left:.16rem;
                font-size:.48rem;
            }
            &.star{
                position:relative;
                border:1px solid #bababa;
            }
            &.active{
                border:1px solid @base-color;
                color:@base-color;
            }
        }
    }
}
</style>